<template>
	<view :class="hasTask ? 'page' : ''">
		<cu-custom bgColor="bg-yz">
			<block style="font-size: 22px;" slot="content">哈密市智慧消防</block>
		</cu-custom>
		<view class="banner bg-banner"></view>
		<view class="content-box">
			<view class="my-card">
				<view class="line line-bg"></view>
				<view class="my-card-box">
					<view v-if="hasTask" style="width: 100%;">
						<view class="nocomplete">
							<text class="cuIcon-daiwancheng"></text>
							待处理任务
						</view>
						<view class="title_body">
							<text class="title">{{ task.name }}</text>
						</view>
						<view class="task-content">
							<view class="card-content">
								<text class="text-card-title">类型：</text>
								<text class="text-card-info">{{ task.typeName }}</text>
							</view>
							<view class="card-content">
								<text class="text-card-title">描述：</text>
								<text class="text-card-info">{{ task.remark }}</text>
							</view>
							<view class="card-content">
								<text class="text-card-title">巡检时间：</text>
								<text class="text-card-info">{{ task.startTime | taskDate }}--{{ task.endTime | taskDate }}</text>
							</view>
							<view>
								<button @click="see_detail(task.ucId)" class="cu-btn round my-btn handle"
									style="width: 100%;background: linear-gradient(90deg, #FCAA19 3%, #FCAA19 3%, #E4B108 98%, #E4B108 98%);">立即处理</button>
							</view>
						</view>
					</view>
					<view class="notask" v-else>
						<view class="nocomplete">
							请领取巡检任务
						</view>
						<view class="title_body">
						</view>
					</view>
				</view>

			</view>
			<view class="utools">
				<text class="utools-title">任务管理</text>
				<view class="uk">
					<view style="background-image: url('https://www.cetczhxf.com/mp3/wdrw.png')" class="bg" @click="my_task">
						<!-- <view class="circle">
							<text style="color: #13D99E" class="cuIcon-woderenwu icon"></text>
						</view> -->
						<text class="module-title">我的任务</text>
					</view>
					<view style="background-image: url('https://www.cetczhxf.com/mp3/rwlq.png')" class="bg" @click="get_task">
						<!-- <view class="circle">
							<text style="color: #8C45EF" class="cuIcon-renwulingqu1 icon"></text>
						</view> -->
						<text class="module-title">任务领取</text>
					</view>
				</view>
			</view>

			<view class="utools">
				<text class="utools-title">火情管理</text>
				<view class="uk">
					<view style="background-image: url('https://www.cetczhxf.com/mp3/yjxx.png')" class="bg" @click="my_yjxx">
						<!-- <view class="circle">
							<text style="color: #EC4651" class="cuIcon-yujingxinxi icon"></text>
						</view> -->
						<text class="module-title-yellow">预警信息</text>
					</view>
					<view style="background-image: url('https://www.cetczhxf.com/mp3/hqxx.png')" class="bg" @click="my_hqxx">
						<!-- <view class="circle">
							<text style="color: #FE9732" class="cuIcon-huoqingxinxi icon"></text>
						</view> -->
						<text class="module-title-yellow">火情信息</text>
					</view>
				</view>
			</view>

			<view class="utools">
				<text class="utools-title">预警管理</text>
				<view class="uk">
					<view class="last_mk bg bg-bottom" @click="xfyh">
						<view class="circle-last">
							<text  class="cuIcon-xiaofangyinhuan icon"></text>
						</view>
						<view class="uk_title">
							<text>消防隐患</text>
						</view>
					</view>
					<view class="last_mk bg bg-bottom" @click="xfyl">
						<view class="circle-last">
							<text  class="cuIcon-xiaofangyanlian icon"></text>
						</view>
						<view class="uk_title">
							<text>消防演练</text>
						</view>
					</view>
					<view v-if="show" class="last_mk bg bg-bottom" @click="fqyl">
						<view class="circle-last">
							<text class="cuIcon-faqiyanlian icon"></text>
						</view>
						<view class="uk_title">
							<text>发起演练</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<message />
	</view>
</template>

<script>
export default {
	created() {
		this.getTask()
		if (uni.getStorageSync('roleCode') === 'XZ-ADMIN') {
			this.show = true
		}
		let that = this
		uni.$on('refreshPage', function () {
			that.getTask()
		})
	},
	onLoad() {
		this.getTask()
		if (uni.getStorageSync('roleCode') === 'XZ-ADMIN') {
			this.show = true
		}
		let that = this
		uni.$on('refreshPage', function () {
			that.getTask()
		})
	},
	data() {
		return {
			hasTask: false,
			task: '',
			show: false,
		}
	},
	methods: {
		my_task() {
			uni.navigateTo({
				url: '/yzqy/rwlb/rwlb',
			})
		},
		get_task() {
			uni.navigateTo({
				url: '/yzqy/rwlq/rwlq',
			})
		},
		my_yjxx() {
			uni.navigateTo({
				url: '/yzqy/yjxxlb/yjxxlb',
			})
		},
		my_hqxx() {
			uni.navigateTo({
				url: '/yzqy/hqxxlb/hqxxlb',
			})
		},
		xfyh() {
			uni.navigateTo({
				url: '/yzqy/xfyhlb/xfyhlb',
			})
		},
		xfyl() {
			uni.navigateTo({
				url: '/yzqy/xfyl/xfyl',
			})
		},
		fqyl() {
			uni.navigateTo({
				url: '/yzqy/fqyl/fqyl',
			})
		},
		see_detail(ucId) {
			uni.navigateTo({
				url: '/yzqy/rwxq/rwxq?ucId=' + ucId,
			})
		},
		getTask() {
			let that = this
			let params = {
				pageNum: 1,
				pageSize: 1,
				status: 1,
			}
			// 请求数据
			let app = getApp()
			app.globalData
				.request({
					url: 'wx/taskmanage/getMyTaskEnterprisePage',
					data: params,
				})
				.then(function (res) {
					if (res.data.data.list.length > 0) {
						that.hasTask = true
						that.task = res.data.data.list[0]
					} else {
						that.hasTask = false
					}
				})
				.catch(function (e) {
					that.hasTask = false
				})
		},
	},
}
</script>

<style scoped>
.page {
	height: 1440rpx;
}



/* 
.my-btn {
	float: right;
	font-size: 24rpx;
	color: #fcaa19;
	height: 50rpx;
} */


.utools {
	margin-top: 20upx;
}

.utools-title {
	font-size: 24rpx;
	color: #333333;
	font-weight: 600;
}

.uk {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	/* margin-top: 10px; */
}

.uk .last_mk {
	height: 40px;
	display: flex;
	flex-direction: column;
	/* border-radius: 8px; */
}

.uk text {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding-left: 90rpx;
	font-size: 24rpx;
	color: #777777;
	font-weight: 600;
}

.uk .last_mk .uk_title {
	font-size: 24rpx;
	width: 100%;
	text-align: center;
	height: 60px;

	display: flex;
	padding-left: 0;
	flex-direction: row;
	align-items: flex-end;
}

.uk_title text {
	width: 100%;
	padding-left: 0;
	color: #FF8F1F !important;
}

.bg {
	flex: 1;
	height: 52px;
	border-radius: 8px;
	background-size: 100% 100%;
	display: flex;
	margin: 0 3px;
}

.circle {
	margin-left: 20px;
	margin-top: 12px;
	width: 30px !important;
	height: 30px !important;
	background: #fff;
	border-radius: 50% !important;
	color: #FF8F1F;
}

.icon {
	font-size: 20px;
	padding-left: 0 !important;
	color: #FF8F1F !important;
}

.icon:before {
	font-size: 18px;
}

.circle-last {
	transform: translateY(50%);
	margin: 0 auto;
	margin-top: -10rpx;
	width: 60rpx !important;
	height: 60rpx !important;
	background: #fff;
	border-radius: 50% !important;
}

.bg-bottom {
	background-color: rgba(255, 143, 31, 0.15);
	border-radius: 8px;
	height: 70px !important;
	color: #FF8F1F;
}



.line-bg {
	background: linear-gradient(90deg, #FCAA19 3%, #FCAA19 3%, #E4B108 98%, #E4B108 98%);
}

.bg-banner {
	background-image: url('https://www.cetczhxf.com/mp3/home_bg.png');
}
.module-title {
	font-size: 16px;
	margin-left: 60upx;
	color:#1A66FF !important;
}
.module-title-yellow {
	font-size: 16px;
	margin-left: 60upx;
	color: #E4AF02 !important;
}
</style>
